* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  transition: background-color 0.2s ease-in-out, margin 0.2s ease-in-out, opacity 0.2s ease-in-out,
    filter 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
}
html,
body,
#root {
  width: 100%;
  height: 100%;
}
.class_pc{
  .swiper{
    width: 100%;
    height: 100%;
    h3{
      width: 100%;
      height: 100%;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }

  width: 100%;
  height: 100%;
  .rv-tabbar{
    display: none;
  }
.indexbox {
  width: 100%;
  background-color: var(--background);
      color: var(--color);
  .tops{
    display: none;
  }
  .top {
    width: 100%;
    height: 80px;
    .topbox {
      width: 1330px;
      height: 80px;
      a {
        text-decoration: none;
      }
      margin: auto;
      display: flex;
      line-height: 80px;
      .topleft {
        flex: 1;
        span {
          padding: 0 50px;
        }
      }
      .topright {
        flex: 1;
        span {
          float: right;
          padding: 0 40px;
        }
      }
    }
  }
  .main {
    width: 100%;
    background: #e7eaee;
    background-color: var(--background);
    color: var(--color);
    .mainbox {
      width: 1430px;
      margin: auto;
      background-color: var(--background);
      color: var(--color);
    }
    .bottom {
      width: 100%;
      height: 100px;
      padding: 40px 0;
      margin-top: 20px;
      background: #292525;
      .bottomicon {
        width: 100px;
        margin: auto;
      }
    }
  }
}
//点击划过样式
.active {
  color: #ff0064 !important;
}
.topleft span a:hover {
  color: #ff0064;
}

// articles页面
.articlesbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  
  .mainleft {
    width: 1010px;
    margin-top: 20px;
    .swiper {
      width: 100%;
      height: 415px;
      background: white;
    }
    .mainTab {
      width: 100%;
      background: white;
      margin-top: 15px;
    }
  }
  .mainright {
    width: 400px;
    height: 665px;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    .mainrighttop {
      width: 100%;
      height: 360px;
      background: white;
      z-index: 1;
      p{
        height: 20px;
      }
    }
    .mainrightbom {
      width: 100%;
      height: 315px;
      background: white;
      margin-top: 20px;
      span {
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        // padding: 50px;
        display: inline-block;
        border: 1px solid #eee;
        margin-left: 20px;
        margin-top: 17px;
        color: #9c9c9c;
      }
      span:hover {
        color: #ff0064;
        border: 1px solid #ff0064;
        cursor: pointer;
      }
    }
  }
}
}
// .class_h5{
//   .indexbox {
//     width: 100%;
//     .tops{
//       display: block;
//     }
//     .top {
//       width: 100%;
//       height: 80px;
//       display: none;
//       .topbox {
//         width: 100%;
//         height: 80px;

//       }
// }
//     }

//     .main {
//       width: 100%;
//       .mainbox {
//         width: 100%;
//         margin: auto;
//         .rv-tab__pane {
//           border: solid 1px black;
//           background-color: var(--background);
//           li {
//             border-bottom: 1px solid white;
//           }
//         }
//         span {
//           color: var(--fontColor);
//         }
//         h3 {
//           color: var(--fontColor);
//         }
//       }
//       .bottom{
//         width: 100%;
//         height: 100px;
//         padding: 40px 0;
//         margin-top: 20px;
//         background: #292525;
//         .bottomicon{
//           width: 100px;
//           margin:  auto;
//         }
//       }
//     }

//   }
  //点击划过样式
  .active {
    color: #ff0064 !important;
  }
  .topleft span a:hover {
    color: #ff0064;
  }

  // articles页面
  .articlesbox{
    width: 100%;
    display: flex;
    justify-content: space-between;
    .mainleft{
      width: 100%;
      margin-top: 20px;
      .swiper{
        width: 100%;
        height: 415px;
        background: white;
        div{
          width: 100%;
          height: 100%;
          img{
          width: 100%;
          height: 100%;
        }
        }

      }
      .mainTab{
        width: 100%;
        background: white;
        margin-top: 15px;
        background-color: var(--background);
        color: var(--color);
      }
    }
    .mainright{
      width: 35%;
      height: 665px;
      margin-top: 20px;
      display: flex;
      display: none;
      flex-wrap: wrap;
      align-content: space-between;
      h1 {
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
      }
      .mainrighttop {
        width: 100%;
        height: 325px;
        background: white;
        z-index: 1;
        p:hover {
          color: #ff0064;
          cursor: pointer;
        }
      .mainrighttop{
        width: 100%;
        height: 325px;
        background: white;
      }
      .mainrightbom{
        width: 100%;
        height: 315px;
        background: white;
        span {
          width: 90px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          // padding: 50px;
          display: inline-block;
          border: 1px solid #eee;
          margin-left: 20px;
          margin-top: 17px;
          color: #9c9c9c;
        }
        span:hover {
          color: #ff0064;
          border: 1px solid #ff0064;
          cursor: pointer;
        }
      }
    }
  }
  .detailbox{
    background-color: var(--background);
      color: var(--color);
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    .DetailLeft{
      width: 60%;
      background: white;
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
      flex-direction: column;
      .img{
        width: 800px;
        height: 500px;
        margin-top: 20px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .MakDownbox{
        width: 800px;
        img{
          width: 100%;
        }
      }
    }
    .DetailRight{
      width: 30%;
      height:800px ;
      .Top{
        width: 100%;
        height: 325px;
        line-height: 355px;
        background: white;
        // overflow: hidden;
        overflow-y: auto;
        h3{
          width: 100%;
          height: 60px;
          line-height: 60px;
          border-bottom: 2px solid #eee;
        }
        p{
          width: 100%;
          height: 40px;
          line-height: 40px;
        }
        p:hover{
          color: #ff0064;
        }
      }
      .Bom{
        width: 100%;
        height: 490px;
        overflow-y: auto;
        margin-top: 20px;
      }
    }
  }

.read{
      position: relative;
      width: 100%;
      height:284px;
      div{
          width: 100%;
          height: 100%;
          display: flex;
          flex-wrap: wrap;

      }
  }
  .read_son{
      position: absolute;
      top: 50%;

      left: 50%;

  }
  .deta_left{
      width: 70%;
      height: 100%;
      img{
          width: 100%;
          height: 500px;
      }
  }
  .DELYS{
      p{
          width: 40px;
          height: 40px;
          border-radius: 50%;
          text-align: center;
          line-height: 40px;
          background-color: #fff;
          margin-top: 10px;
      }
  }

  // .Markright {
  //   width: 20%;
  //   position: fixed;
  //   right: 350px;
  //   .marktop {
  //     background: white;
  //   }
  //   .marklou {
  //     height: 450px;
  //     overflow: auto;
  //   }
  // }
.top-jumper {
  position: fixed;
  right: 0;
  bottom: 15%;
  width: 42px;
  height: 42px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  cursor:pointer;
  &:before {
    content: '▲';
    display: block;
    text-align: center;
    color: #aaa;
    line-height: 42px;
  }
  &:hover:before {
    content: '回顶部';
  }
}
.read {
  position: relative;
  width: 100%;
  height: 90px;
  div {
      width: 100%;
      height: 90%;
      display: flex;
      flex-wrap: wrap;
  }
}
.read_son {
  position: absolute;
  top: 50%;

  left: 50%;
}
.demo-tabs {
  .rv-tab__pane {
    padding: 24px 20px;
    background-color: #fff;
  }

  .rv-tabs--card .rv-tab__pane {
    background-color: transparent;
  }
}

.add_nei{
  width: 100%;
  height: 500px;
ul{
      h3{
          margin-bottom: 20px;
          margin-top: 10px;
      }

      img{
          width: 200px;
          height: 100px;

      }

      .span1{
          font-size: 15px;
          color: #ccc;
      }
  }

  .div_ul1{
      width: 100%;
      height: 100px;
      clear: both;
      img{
              float: left;
              margin-right: 10px;
      }
  }
}

//分享页
.ant-modal-content {
  width: 403px;
  height: 530px;
  background: red;
  position: relative;
  .ant-modal-footer {
    position: absolute;
    bottom: 10px;
    right: 15px;
  }
  .Sharebox {
    width: 100%;
    height: 420px;
    border-bottom: 2px solid #e7eaee;
    border-top: 2px solid #e7eaee;
    img {
      margin-top: 10px;
      width: 100%;
      height: 265px;
    }
  }
}
.ant-modal-content{
  height: 200px;
}

// * {
//   margin: 0;
//   padding: 0;
//   list-style: none;
//   box-sizing: border-box;
// }
// html,
// body,
// #root {
//   width: 100%;
//   height: 100%;
// }
// .class_pc {
//   width: 100%;
//   height: 100%;
//    .swiper{
//     width: 100%;
//     height: 220px;
//     h3{
//       width: 100%;
//       height: 100%;
//       img{
//         width: 100%;
//         height: 220px;
//       }
//     }
//   }
//   .indexbox {
//     width: 100%;
//     .tops {
//       display: none;
//     }
//     .top {
//       width: 100%;
//       height: 80px;
//       .topbox {
//         width: 1330px;
//         height: 80px;
//         a {
//           text-decoration: none;
//         }
//         margin: auto;
//         display: flex;
//         line-height: 80px;
//         .topleft {
//           flex: 1;
//           span {
//             padding: 0 50px;
//           }
//         }
//         .topright {
//           flex: 1;
//           span {
//             float: right;
//             padding: 0 40px;
//           }
//         }
//       }
//     }
//     .main {
//       width: 100%;
//       background: #e7eaee;
//       .mainbox {
//         width: 1430px;
//         height: 1000px;
//         margin: auto;
//       }
//       .bottom {
//         width: 100%;
//         height: 100px;
//         padding: 40px 0;
//         margin-top: 20px;
//         background: #292525;
//         .bottomicon {
//           width: 100px;
//           margin: auto;
//         }
//       }
//     }
//   }
//   //点击划过样式
//   .active {
//     color: #ff0064 !important;
//   }
//   .topleft span a:hover {
//     color: #ff0064;
//   }

//   // articles页面
//   .articlesbox {
//     width: 100%;
//     display: flex;
//     justify-content: space-between;
//     .mainleft {
//       width: 65%;
//       margin-top: 20px;
//       .swiper {
//         width: 100%;
//         height: 415px;
//         background: white;
//         div {
//           width: 100%;
//           height: 100%;
//           img {
//             width: 100%;
//             height: 100%;
//           }
//         }
//       }
//       .mainTab {
//         width: 100%;
//         background: white;
//         margin-top: 15px;
//       }
//     }
//     .mainright {
//       width: 30%;
//       height: 665px;
//       margin-top: 20px;
//       display: flex;
//       flex-wrap: wrap;
//       align-content: space-between;
//       h1 {
//         height: 60px;
//         line-height: 60px;
//         border-bottom: 1px solid #ccc;
//       }
//       .mainrighttop {
//         width: 100%;
//         height: 325px;
//         background: white;
//         z-index: 1;
//         p:hover {
//           color: #ff0064;
//           cursor: pointer;
//         }
//       }
//       .mainrightbom {
//         width: 100%;
//         height: 315px;
//         background: white;
//         span {
//           width: 90px;
//           height: 30px;
//           line-height: 30px;
//           text-align: center;
//           // padding: 50px;
//           display: inline-block;
//           border: 1px solid #eee;
//           margin-left: 20px;
//           margin-top: 17px;
//           color: #9c9c9c;
//         }
//         span:hover {
//           color: #ff0064;
//           border: 1px solid #ff0064;
//           cursor: pointer;
//         }
//       }
//     }
//   }
//   .detailbox {
//     width: 100%;
//     height: 100%;
//     display: flex;
//     justify-content: space-around;
//     padding: 20px 0;
//     .DetailLeft {
//       width: 60%;
//       background: white;
//       display: flex;
//       flex-wrap: wrap;
//       align-content: space-around;
//       flex-direction: column;

//       .img {
//         width: 800px;
//         height: 500px;
//         margin-top: 20px;
//         img {
//           width: 100%;
//           height: 100%;
//         }
//       }
//       .MakDownbox {
//         width: 800px;
//         img {
//           width: 100%;
//         }
//       }
//     }
//     .DetailRight {
//       width: 30%;
//       height: 800px;
//       .Top {
//         width: 100%;
//         height: 325px;
//         line-height: 355px;
//         background: white;
//         // overflow: hidden;
//         overflow-y: auto;
//         h3 {
//           width: 100%;
//           height: 60px;
//           line-height: 60px;
//           border-bottom: 2px solid #eee;
//         }
//         p {
//           width: 100%;
//           height: 40px;
//           line-height: 40px;
//         }
//         p:hover {
//           color: #ff0064;
//         }
//       }
//       .Bom {
//         width: 100%;
//         height: 490px;h5
//         overflow-y: auto;
//         margin-top: 20px;
//       }
//     }
//   }
//   .demo-tabbar {
//     display: none;
//   }
//   .like {
//     display: block;
//   }
// }
.class_h5 {
  .swiper{
    width: 100%;
    height: 220px;
    h3{
      width: 100%;
      height: 100%;
      img{
        width: 100%;
        height: 220px;
      }
    }
  }
  .like {
    display: none;
  }
  .demo-tabbar {
    display: block;
  }
  .indexbox {
    width: 100%;
    .tops {
      display: block;
    }
    .top {
      width: 100%;
      height: 80px;
      display: none;
      .topbox {
        width: 100%;
        height: 80px;
      }
    }
  }

  .main {
    width: 100%;
    background: #e7eaee;
    .mainbox {
      width: 100%;
      margin: auto;
    }
    .bottom {
      width: 100%;
      height: 100px;
      padding: 40px 0;
      margin-top: 20px;
      background: #292525;
      .bottomicon {
        width: 100px;
        margin: auto;
      }
    }
  }
}
//点击划过样式
.active {
  color: #ff0064 !important;
}
.topleft span a:hover {
  color: #ff0064;
}
//Home右侧tab详情
.HomeRightTabDetailDetail {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  .HomeRightTabDetailDetailLeft {
    width: 60%;
    .top {
      width: 100%;
      height: 115px;
      background: white;
      display: flex;
      flex-direction: column;
      align-content: center;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      span{
        font-size: 25px;
        font-weight: 600;
        color: #ff0064;
      }
    }
    .main {
      width: 100%;
      height: 190px;
      margin-top: 20px;
      background: white;
      h3 {
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
      }
      span{
          width: 90px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          display: inline-block;
          border: 1px solid #eee;
          margin-left: 10px;
          margin-top: 17px;
          color: #9c9c9c;
      }
      span:hover {
        color: #ff0064;
        border: 1px solid #ff0064;
        cursor: pointer;
      }
    }
    .footer {
      width: 100%;
      height: 1000px;
      background: white;
      margin-top: 20px;
    }
  }
  .HomeRightTabDetailDetailRight {
    width: 30%;
    height: 800px;
    .righttop {
      width: 100%;
      height: 325px;
      line-height: 355px;
      background: white;
      overflow: hidden;
      h3{
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
      }
      p{
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
      }
      p:hover{
        color: #ff0064;
        cursor: pointer;
      }
    }
    .rightbom {
      width: 100%;
      background: white;
      margin-top: 20px;
      h3{
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
      }
      li{
        width: 100%;
        height: 45px;
        line-height: 45px;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
      }
      li:hover{
        color: #ff0064;
        cursor: pointer;
      }
    }
  }
}
//Tab切换
.tab{
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: tan;
}
.tab_down{
  height: 240px;
}
.tab_down li{
  height: 240px;
  background-color: greenyellow;
  display: none;
}
.tab_down li.show{
  display: block;
}
.tab_top{
  height: 60px;
}
.tab_top li{
  height: 60px;
  width: 30%;
  background-color: gray;
  float: left;
  margin-right: 10px;
}
.tab_top li.show{
  background-color: greenyellow;
}
//文章详情
.detailbox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  .DetailLeft {
    width: 60%;
    background: white;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    flex-direction: column;
    .img {
      width: 800px;
      height: 500px;
      margin-top: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .MakDownbox {
      width: 800px;
      img {
        width: 100%;
      }
    }
  }
  .DetailRight {
    width: 30%;
    height: 800px;
    .Top {
      width: 100%;
      height: 325px;
      line-height: 355px;
      background: white;
      // overflow: hidden;
      overflow-y: auto;
      h3 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 2px solid #eee;
      }
      p {
        width: 100%;
        height: 40px;
        line-height: 40px;
      }
      p:hover {
        color: #ff0064;
      }
    }
    .Bom {
      width: 100%;
      height: 490px;
      overflow-y: auto;
      margin-top: 20px;
    }
  }
}

.read {
  // position: relative;
  width: 100%;
  height: 100%;
  p{
    width: 100%;
    height: 20px;
  }
  
}
.read_son {
  position: absolute;
  top: 50%;
  .detailbox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    .DetailLeft {
      width: 100%;
      background: white;

      flex-wrap: wrap;
      align-content: space-around;
      flex-direction: column;
      .MakDownbox {
        width: 100%;
      }
      .img {
        width: 100%;
        height: 500px;
        margin-top: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .MakDownbox {
        width: 800px;
        img {
          width: 100%;
        }
      }
    }
    .DetailRight {
      width: 30%;
      display: none;
      height: 800px;
      .Top {
        width: 100%;
        height: 325px;
        line-height: 355px;
        background: white;
        // overflow: hidden;
        overflow-y: auto;
        h3 {
          width: 100%;
          height: 60px;
          line-height: 60px;
          border-bottom: 2px solid #eee;
        }
        p {
          width: 100%;
          height: 40px;
          line-height: 40px;
        }
        p:hover {
          color: #ff0064;
        }
      }
      .Bom {
        width: 100%;
        height: 490px;
        overflow-y: auto;
        margin-top: 20px;
      }
    }
  }
}
// //点击划过样式
// .active {
//   color: #ff0064 !important;
// }
// .topleft span a:hover {
//   color: #ff0064;
// }
// //Home右侧tab详情
// .HomeRightTabDetailDetail {
//   width: 100%;
//   height: 100%;
//   display: flex;
//   justify-content: space-around;
//   padding: 20px 0;
//   .HomeRightTabDetailDetailLeft {
//     width: 60%;
//     .top {
//       width: 100%;
//       height: 115px;
//       background: white;
//       display: flex;
//       flex-direction: column;
//       align-content: center;
//       flex-wrap: wrap;
//       justify-content: space-evenly;
//       align-items: center;
//       span {
//         font-size: 25px;
//         font-weight: 600;
//         color: #ff0064;
//       }
//     }
//     .main {
//       width: 100%;
//       height: 190px;
//       margin-top: 20px;
//       background: white;
//       h3 {
//         height: 60px;
//         line-height: 60px;
//         border-bottom: 1px solid #ccc;
//       }
//       span {
//         width: 90px;
//         height: 30px;
//         line-height: 30px;
//         text-align: center;
//         display: inline-block;
//         border: 1px solid #eee;
//         margin-left: 10px;
//         margin-top: 17px;
//         color: #9c9c9c;
//       }
//       span:hover {
//         color: #ff0064;
//         border: 1px solid #ff0064;
//         cursor: pointer;
//       }
//     }
//     .footer {
//       width: 100%;
//       height: 1000px;
//       background: white;
//       margin-top: 20px;
//     }
//   }
//   .HomeRightTabDetailDetailRight {
//     width: 30%;
//     height: 800px;
//     .righttop {
//       width: 100%;
//       height: 325px;
//       line-height: 355px;
//       background: white;
//       overflow: hidden;
//       h3 {
//         width: 100%;
//         height: 60px;
//         line-height: 60px;
//         border-bottom: 1px solid #ccc;
//       }
//       p {
//         width: 100%;
//         height: 30px;
//         line-height: 30px;
//         display: flex;
//       }
//       p:hover {
//         color: #ff0064;
//         cursor: pointer;
//       }
//     }
//     .rightbom {
//       width: 100%;
//       background: white;
//       margin-top: 20px;
//       h3 {
//         width: 100%;
//         height: 60px;
//         line-height: 60px;
//         border-bottom: 1px solid #ccc;
//       }
//       li {
//         width: 100%;
//         height: 45px;
//         line-height: 45px;
//         display: flex;
//         justify-content: space-between;
//         flex-direction: row;
//       }
//       li:hover {
//         color: #ff0064;
//         cursor: pointer;
//       }
//     }
//   }
// }

// //Tab切换
// .tab {
//   width: 500px;
//   height: 300px;
//   position: absolute;
//   top: 0;
//   bottom: 0;
//   left: 0;
//   right: 0;
//   margin: auto;
//   background-color: tan;
// }
// .tab_down {
//   height: 240px;
// }
// .tab_down li {
//   height: 240px;
//   background-color: greenyellow;
//   display: none;
// }
// .tab_down li.show {
//   display: block;
// }
// .tab_top {
//   height: 60px;
// }
// .tab_top li {
//   height: 60px;
//   width: 30%;
//   background-color: gray;
//   float: left;
//   margin-right: 10px;
// }
// .tab_top li.show {
//   background-color: greenyellow;
// }
// //文章详情
// .detailbox {
//   width: 100%;
//   height: 100%;
//   display: flex;
//   justify-content: space-around;
//   padding: 20px 0;
//   .DetailLeft {
//     width: 60%;
//     background: white;
//     display: flex;
//     flex-wrap: wrap;
//     align-content: space-around;
//     flex-direction: column;
//     .img {
//       width: 800px;
//       height: 500px;
//       margin-top: 20px;
//       img {
//         width: 100%;
//         height: 100%;
//       }
//     }
//     .MakDownbox {
//       width: 800px;
//       img {
//         width: 100%;
//       }
//     }
//   }
//   .DetailRight {
//     width: 30%;
//     height: 800px;
//     .Top {
//       width: 100%;
//       height: 325px;
//       line-height: 355px;
//       background: white;
//       // overflow: hidden;
//       overflow-y: auto;
//       h3 {
//         width: 100%;
//         height: 60px;
//         line-height: 60px;
//         border-bottom: 2px solid #eee;
//       }
//       p {
//         width: 100%;
//         height: 40px;
//         line-height: 40px;
//       }
//       p:hover {
//         color: #ff0064;
//       }
//     }
//     .Bom {
//       width: 100%;
//       height: 490px;
//       overflow-y: auto;
//       margin-top: 20px;
//     }
//   }
// }

// .read {
//   // position: relative;
//   width: 100%;
//   height: 100%;
//   p {
//     line-height: 30px;
//     width: 100%;
//   }
// }
// .read_son {
//   position: absolute;
//   top: 50%;

//   left: 50%;
// }
// .deta_left {
//   width: 70%;
//   height: 100%;
//   img {
//     width: 100%;
//     height: 500px;
//   }
// }
// .DELYS {
//   p {
//     width: 40px;
//     height: 40px;
//     border-radius: 50%;
//     text-align: center;
//     line-height: 40px;
//     background-color: #fff;
//     margin-top: 10px;
//   }
// }

// // .Markright {
// //   width: 20%;
// //   position: fixed;
// //   right: 350px;
// //   .marktop {
// //     background: white;
// //   }
// //   .marklou {
// //     height: 450px;
// //     overflow: auto;
// //   }
// // }
// .top-jumper {
//   position: fixed;
//   right: 0;
//   bottom: 15%;
//   width: 42px;
//   height: 42px;
//   background-color: #fff;
//   border: 1px solid #ddd;
//   border-radius: 4px;
//   font-size: 12px;
//   cursor: pointer;
//   &:before {
//     content: "▲";
//     display: block;
//     text-align: center;
//     color: #aaa;
//     line-height: 42px;
//   }
//   &:hover:before {
//     content: "回顶部";
//   }
// }
// .read {
//   position: relative;
//   width: 100%;
//   height: 284px;
//   div {
//     width: 100%;
//     height: 100%;
//     display: flex;
//     flex-wrap: wrap;
//   }
// }
// .read_son {
//   position: absolute;
//   top: 50%;

//   left: 50%;
// }
// .demo-tabs {
//   .rv-tab__pane {
//     padding: 24px 20px;
//     background-color: #fff;
//   }

//   .rv-tabs--card .rv-tab__pane {
//     background-color: transparent;
//   }
// }

// .add_nei {
//   width: 100%;
//   height: 500px;
//   ul {
//     h3 {
//       margin-bottom: 20px;
//       margin-top: 10px;
//     }

//     img {
//       width: 200px;
//       height: 100px;
//     }

//     .span1 {
//       font-size: 15px;
//       color: #ccc;
//     }
//   }

//   .div_ul1 {
//     width: 100%;
//     height: 100px;
//     clear: both;
//     img {
//       float: left;
//       margin-right: 10px;
//     }
//   }
// }

// //分享页
.ant-modal-content {
  width: 403px;
  height: 530px;
  background: red;
  position: relative;
  .ant-modal-footer {
    position: absolute;
    bottom: 10px;
    right: 15px;
  }
  .Sharebox {
    width: 100%;
    height: 420px;
    border-bottom: 2px solid #e7eaee;
    border-top: 2px solid #e7eaee;
    img {
      margin-top: 10px;
      width: 100%;
      height: 265px;
    }
  }
}
.ant-modal-content {
  height: 200px;
}

.archivesbox {
  width: 100%;
  height: 100%;
  display: flex;

  .archivesleft {
    width: 65%;
    height: 100%;
    // background-color: var(--background);
    background: white;
    color: var(--color);
    margin-top: 20px;
    .archivestop {
      width: 100%;
      height: 100px;
      background: white;
      border-bottom: 1px solid #000;
      // background-color: var(--background);
      color: var(--color);
      .plum {
        color: #ff0064;
        font-size: 30px;
        margin-left: 350px;
        padding-top: 10px;
      }
      .num {
        margin-left: 350px;
        margin-top: 10px;
        .numm {
          color: #ff0064;
        }
      }
    }
    .archivescont {
      width: 100%;
      height: calc(100% - 100px);
      background: white;
      // background-color: var(--background);
      color: var(--color);
      ul > li {
        margin-top: 20px;
        margin-left: 50px;
        span {
          padding-right: 10px;
        }
      }
      ul > li:hover {
        color: red;
      }
      li:before {
        content: "";
        width: 6px;
        height: 6px;
        display: inline-block;
        border-radius: 50%;
        background: black;
        vertical-align: middle;
        margin-right: 14px;
      }
    }
  }
  .archivesright {
    float: right;
    width: 30%;
    margin-left: 80px;
    background-color: var(--background);
    color: var(--color);
    .archivesrighttop {
      width: 100%;
      // height: 400px;
      background: white;
      // border: solid 1px #ccc;
      background-color: var(--background);
      color: var(--color);
      span {
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        // padding: 50px;
        display: inline-block;
        border: 1px solid #eee;
        margin-left: 20px;
        margin-top: 17px;
        color: #9c9c9c;
      }
      span:hover {
        color: #ff0064;
        border: 1px solid #ff0064;
        cursor: pointer;
      }
    }
  }
}

//分享页
.ant-modal-content {
  width: 403px;
  height: 530px;
  background: red;
  position: relative;
  background-color: var(--background);
      color: var(--color);
  .ant-modal-footer {
    position: absolute;
    bottom: 10px;
    right: 15px;
  }
  .Sharebox {
    width: 100%;
    height: 420px;
    border-bottom: 2px solid #e7eaee;
    border-top: 2px solid #e7eaee;
    img {
      margin-top: 10px;
      width: 100%;
      height: 265px;
    }
  }
}
// .ant-modal-content{
//   height: 200px;
// }

// .mainright {
//   width: 400px;
//   height: 665px;
//   margin-top: 20px;
//   display: flex;
//   flex-wrap: wrap;
//   align-content: space-between;
//   h1 {
//     height: 60px;
//     line-height: 60px;
//     border-bottom: 1px solid #ccc;
//   }
//   .mainrighttop {
//     width: 100%;
//     height: 325px;
//     background: white;
//     z-index: 1;
//     p:hover {
//       color: #ff0064;
//       cursor: pointer;
//     }
//   }
//   .mainrightbom {
//     width: 100%;
//     height: 315px;
//     background: white;
//     span {
//       width: 90px;
//       height: 30px;
//       line-height: 30px;
//       text-align: center;
//       // padding: 50px;
//       display: inline-block;
//       border: 1px solid #eee;
//       margin-left: 20px;
//       margin-top: 17px;
//       color: #9c9c9c;
//     }
//     span:hover {
//       color: #ff0064;
//       border: 1px solid #ff0064;
//       cursor: pointer;
//     }
//   }
// }

// .KnowledgeBooksbox {
//   width: 100%;
//   display: flex;
//   justify-content: space-between;
//   .leftbox {
//     width: 65%;
//     margin-top: 20px;
//     .no{
//       width: 100%;
//       background: white;
//     }
//   }
//   .rightbox {
//     width: 30%;
//     h3{
//       width: 100%;
//       height: 60px;
//       line-height: 60px;
//       border-bottom: 1px solid #ccc;
//     }
//     li{
//       width: 100%;
//       height: 45px;
//       line-height: 45px;
//       display: flex;
//       justify-content: space-between;
//       flex-direction: row;
//     }
//     li:hover{
//       color: #ff0064;
//       cursor: pointer;
//     }
//   }
// }
.KnowledgeBooksbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .leftbox {
    width: 65%;
    margin-top: 20px;
    .no{
      width: 100%;
      background: white;
    }
  }
  .rightbox {
    width: 30%;
    h3{
      width: 100%;
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #ccc;
    }
    li{
      width: 100%;
      height: 45px;
      line-height: 45px;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
    }
    li:hover{
      color: #ff0064;
      cursor: pointer;
    }
  }
}


// .class_pc {
//   width: 100%;
//   height: 100%;
//   background-color: var(--background);
//   color: var(--color);
//   .indexbox {
//     width: 100%;
//     .tops {
//       display: none;
//       color: var(--color);
//     }
//     .top {
//       width: 100%;
//       height: 80px;
//       background-color: var(--headerColor);
//       border-bottom: 2px solid #ccc;
//       .topbox {
//         width: 1330px;
//         height: 80px;
//         border-bottom: 2px solid #ccc;

//         a {
//           text-decoration: none;
//           color: var(--color);
//         }
//         margin: auto;
//         display: flex;
//         line-height: 80px;
//         .topleft {
//           flex: 1;
//           span {
//             padding: 0 50px;
//           }
//         }
//         .topright {
//           flex: 1;
//           span {
//             float: right;
//             padding: 5px 40px;
//           }
//           .icon {
//             fill: var(--color);
//           }
//           //太阳动画
//           .theme:hover {
//             animation: 4s iconsAnimation ease;
//           }

//           > span:hover svg {
//             fill: red;
//           }
//         }
//       }
//     }
//     .main {
//       width: 100%;
//       .mainbox {
//         width: 1430px;
//         margin: auto;
//         .rv-tab__pane {
//           border: solid 1px black;
//           background-color: var(--background);
//           li {
//             border-bottom: 1px solid white;
//           }
//         }
//         span {
//           color: var(--fontColor);
//         }
//         h3 {
//           color: var(--fontColor);
//         }
//       }
//       .bottom {
//         width: 100%;
//         height: 100px;
//         padding: 40px 0;
//         margin-top: 20px;
//         background: #292525;
//         .bottomicon {
//           width: 100px;
//           margin: auto;
//         }
//       }
//     }
//   }
//   //点击划过样式
//   .active {
//     color: #ff0064 !important;
//   }
//   .topleft span a:hover {
//     color: #ff0064;
//   }

//   // articles页面
//   .articlesbox {
//     width: 100%;
//     display: flex;
//     justify-content: space-between;
//     background-color: var(--background);
//     .mainleft {
//       width: 1010px;
//       margin-top: 20px;
//       background-color: var(--background);
//       color: var(--color);
//       .swiper {
//         width: 100%;
//         height: 415px;
//         background: white;
//       }
//       .mainTab {
//         width: 100%;
//         background: white;
//         margin-top: 15px;
//         background-color: var(--background);
//         color: var(--color);
//       }
//     }
//     .mainright {
//       width: 400px;
//       height: 665px;
//       margin-top: 20px;
//       display: flex;
//       flex-wrap: wrap;
//       align-content: space-between;
//       .mainrighttop {
//         width: 99%;
//         height: 325px;
//         border: solid 2px #ccc;
//         background-color: var(--background);
//         color: var(--color);
//       }
//       .mainrightbom {
//         width: 99%;
//         height: 315px;
//         background: white;
//         background-color: var(--background);
//         color: var(--color);
//         border: solid 2px #ccc;
//       }
//     }
//   }
// }

// .main {
//   width: 100%;

//   background-color: var(--background);
//   .mainbox {
//     width: 100%;
//     margin: auto;
//     background-color: var(--background);
//   }
//   .bottom {
//     width: 100%;
//     height: 100px;
//     padding: 40px 0;
//     margin-top: 20px;
//     background: #292525;
//     .bottomicon {
//       width: 100px;
//       margin: auto;
//     }
//   }
// }

// .detailbox {
//   width: 100%;
//   height: 100%;
//   display: flex;
//   justify-content: space-around;
//   padding: 20px 0;
//   background-color: var(--background);
//   .DetailLeft {
//     width: 60%;
//     background: white;
//     display: flex;
//     flex-wrap: wrap;
//     align-content: space-around;
//     flex-direction: column;
//     background-color: var(--background);
//     .img {
//       width: 800px;
//       height: 500px;
//       margin-top: 20px;
//       img {
//         width: 100%;
//         height: 100%;
//       }
//     }
//     .MakDownbox {
//       width: 800px;
//       background-color: var(--background);
//       color: var(--color);
//       img {
//         width: 100%;
//       }
//     }
//   }
//   .DetailRight {
//     width: 30%;
//     height: 800px;
//     background-color: var(--background);
//     color: var(--color);
//     .Top {
//       width: 100%;
//       height: 325px;
//       line-height: 355px;
//       background: white;
//       background-color: var(--background);
//       color: var(--color);
//       // overflow: hidden;
//       overflow-y: auto;
//       h3 {
//         width: 100%;
//         height: 60px;
//         line-height: 60px;
//         border-bottom: 2px solid #eee;
//       }
//       p {
//         width: 100%;
//         height: 40px;
//         line-height: 40px;
//       }
//       p:hover {
//         color: #ff0064;
//       }
//     }
//     .Bom {
//       width: 100%;
//       height: 390px;
//       overflow-y: auto;
//       margin-top: 20px;
//       .className {
//         background: red;
//       }
//     }
//   }
// }

//Home右侧tab详情
.HomeRightTabDetailDetail {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  .HomeRightTabDetailDetailLeft {
    width: 60%;
    .top {
      width: 100%;
      height: 115px;
      background: white;
      display: flex;
      flex-direction: column;
      align-content: center;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      span{
        font-size: 25px;
        font-weight: 600;
        color: #ff0064;
      }
    }
    .main {
      width: 100%;
      height: 190px;
      margin-top: 20px;
      background: white;
      h3 {
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
      }
      span{
          width: 90px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          display: inline-block;
          border: 1px solid #eee;
          margin-left: 10px;
          margin-top: 17px;
          color: #9c9c9c;
      }
      span:hover {
        color: #ff0064;
        border: 1px solid #ff0064;
        cursor: pointer;
      }
    }
    .footer {
      width: 100%;
      height: 1000px;
      background: white;
      margin-top: 20px;
    }
  }
  .HomeRightTabDetailDetailRight {
    width: 30%;
    height: 800px;
    .righttop {
      width: 100%;
      height: 325px;
      line-height: 355px;
      background: white;
      overflow: hidden;
      h3{
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
      }
      p{
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
      }
      p:hover{
        color: #ff0064;
        cursor: pointer;
      }
    }
    .rightbom {
      width: 100%;
      background: white;
      margin-top: 20px;
      h3{
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
      }
      li{
        width: 100%;
        height: 45px;
        line-height: 45px;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
      }
      li:hover{
        color: #ff0064;
        cursor: pointer;
      }
    }
  }
}
  }


  // * {
//   margin: 0;
//   padding: 0;
//   list-style: none;
//   box-sizing: border-box;
//   transition: background-color 0.2s ease-in-out, margin 0.2s ease-in-out, opacity 0.2s ease-in-out,
//     filter 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
// }
// html,
// body,
// #root {
//   width: 100%;
//   height: 100%;
// }
// .class_pc{
//   width: 100%;
//   height: 100%;
// .indexbox {
//   width: 100%;
//   .tops{
//     display: none;
//   }
//   .top {
//     width: 100%;
//     height: 80px;
//     .topbox {
//       width: 1330px;
//       height: 80px;
//       a {
//         text-decoration: none;
//       }
//       margin: auto;
//       display: flex;
//       line-height: 80px;
//       .topleft {
//         flex: 1;
//         span {
//           padding: 0 50px;
//         }
//       }
//       .topright {
//         flex: 1;
//         span {
//           float: right;
//           padding: 0 40px;
//         }
//       }
//     }
//   }
//   .main {
//     width: 100%;
//     background: #e7eaee;
//     .mainbox {
//       width: 1430px;
//       margin: auto;
//     }
//     .bottom {
//       width: 100%;
//       height: 100px;
//       padding: 40px 0;
//       margin-top: 20px;
//       background: #292525;
//       .bottomicon {
//         width: 100px;
//         margin: auto;
//       }
//     }
//   }
// }
// //点击划过样式
// .active {
//   color: #ff0064 !important;
// }
// .topleft span a:hover {
//   color: #ff0064;
// }

// // articles页面
// .articlesbox {
//   width: 100%;
//   display: flex;
//   justify-content: space-between;
//   .mainleft {
//     width: 1010px;
//     margin-top: 20px;
//     .swiper {
//       width: 100%;
//       height: 415px;
//       background: white;
//     }
//     .mainTab {
//       width: 100%;
//       background: white;
//       margin-top: 15px;
//     }
//   }
//   .mainright {
//     width: 400px;
//     height: 665px;
//     margin-top: 20px;
//     display: flex;
//     flex-wrap: wrap;
//     align-content: space-between;
//     .mainrighttop {
//       width: 100%;
//       height: 325px;
//       background: white;
//       z-index: 1;
//     }
//     .mainrightbom {
//       width: 100%;
//       height: 315px;
//       background: white;
//     }
//   }
// }
// }
// .class_h5{
//   .indexbox {
//     width: 100%;
//     .tops{
//       display: block;
//     }
//     .top {
//       width: 100%;
//       height: 80px;
//       display: none;
//       .topbox {
//         width: 100%;
//         height: 80px;

//       }
// }
//     }

//     .main {
//       width: 100%;
//       .mainbox {
//         width: 100%;
//         margin: auto;
//         .rv-tab__pane {
//           border: solid 1px black;
//           background-color: var(--background);
//           li {
//             border-bottom: 1px solid white;
//           }
//         }
//         span {
//           color: var(--fontColor);
//         }
//         h3 {
//           color: var(--fontColor);
//         }
//       }
//       .bottom{
//         width: 100%;
//         height: 100px;
//         padding: 40px 0;
//         margin-top: 20px;
//         background: #292525;
//         .bottomicon{
//           width: 100px;
//           margin:  auto;
//         }
//       }
//     }

//   }
//   //点击划过样式
//   .active {
//     color: #ff0064 !important;
//   }
//   .topleft span a:hover {
//     color: #ff0064;
//   }

//   // articles页面
//   .articlesbox{
//     width: 100%;
//     display: flex;
//     justify-content: space-between;
//     .mainleft{
//       width: 100%;
//       margin-top: 20px;
//       .swiper{
//         width: 100%;
//         height: 415px;
//         background: white;
//         div{
//           width: 100%;
//           height: 100%;
//           img{
//           width: 100%;
//           height: 100%;
//         }
//         }

//       }
//       .mainTab{
//         width: 100%;
//         background: white;
//         margin-top: 15px;
//         background-color: var(--background);
//         color: var(--color);
//       }
//     }
//     .mainright{
//       width: 35%;
//       height: 665px;
//       margin-top: 20px;
//       display: flex;
//       display: none;
//       flex-wrap: wrap;
//       align-content: space-between;
//       .mainrighttop{
//         width: 100%;
//         height: 325px;
//         background: white;
//       }
//       .mainrightbom{
//         width: 100%;
//         height: 315px;
//         background: white;
//       }
//     }
//   }
//   .detailbox{
//     width: 100%;
//     height: 100%;
//     display: flex;
//     justify-content: space-around;
//     padding: 20px 0;
//     .DetailLeft{
//       width: 60%;
//       background: white;
//       display: flex;
//       flex-wrap: wrap;
//       align-content: space-around;
//       flex-direction: column;
//       .img{
//         width: 800px;
//         height: 500px;
//         margin-top: 20px;
//         img{
//           width: 100%;
//           height: 100%;
//         }
//       }
//       .MakDownbox{
//         width: 800px;
//         img{
//           width: 100%;
//         }
//       }
//     }
//     .DetailRight{
//       width: 30%;
//       height:800px ;
//       .Top{
//         width: 100%;
//         height: 325px;
//         line-height: 355px;
//         background: white;
//         // overflow: hidden;
//         overflow-y: auto;
//         h3{
//           width: 100%;
//           height: 60px;
//           line-height: 60px;
//           border-bottom: 2px solid #eee;
//         }
//         p{
//           width: 100%;
//           height: 40px;
//           line-height: 40px;
//         }
//         p:hover{
//           color: #ff0064;
//         }
//       }
//       .Bom{
//         width: 100%;
//         height: 490px;
//         overflow-y: auto;
//         margin-top: 20px;
//       }
//     }
//   }

// .read{
//       position: relative;
//       width: 100%;
//       height:284px;
//       div{
//           width: 100%;
//           height: 100%;
//           display: flex;
//           flex-wrap: wrap;

//       }
//   }
//   .read_son{
//       position: absolute;
//       top: 50%;

//       left: 50%;

//   }
//   .deta_left{
//       width: 70%;
//       height: 100%;
//       img{
//           width: 100%;
//           height: 500px;
//       }
//   }
//   .DELYS{
//       p{
//           width: 40px;
//           height: 40px;
//           border-radius: 50%;
//           text-align: center;
//           line-height: 40px;
//           background-color: #fff;
//           margin-top: 10px;
//       }
//   }

//   // .Markright {
//   //   width: 20%;
//   //   position: fixed;
//   //   right: 350px;
//   //   .marktop {
//   //     background: white;
//   //   }
//   //   .marklou {
//   //     height: 450px;
//   //     overflow: auto;
//   //   }
//   // }
// .top-jumper {
//   position: fixed;
//   right: 0;
//   bottom: 15%;
//   width: 42px;
//   height: 42px;
//   background-color: #fff;
//   border: 1px solid #ddd;
//   border-radius: 4px;
//   font-size: 12px;
//   cursor:pointer;
//   &:before {
//     content: '▲';
//     display: block;
//     text-align: center;
//     color: #aaa;
//     line-height: 42px;
//   }
//   &:hover:before {
//     content: '回顶部';
//   }
// }
// .read {
//   position: relative;
//   width: 100%;
//   height: 284px;
//   div {
//       width: 100%;
//       height: 100%;
//       display: flex;
//       flex-wrap: wrap;
//   }
// }
// .read_son {
//   position: absolute;
//   top: 50%;

//   left: 50%;
// }
// .demo-tabs {
//   .rv-tab__pane {
//     padding: 24px 20px;
//     background-color: #fff;
//   }

//   .rv-tabs--card .rv-tab__pane {
//     background-color: transparent;
//   }
// }

// .add_nei{
//   width: 100%;
//   height: 500px;
// ul{
//       h3{
//           margin-bottom: 20px;
//           margin-top: 10px;
//       }

//       img{
//           width: 200px;
//           height: 100px;

//       }

//       .span1{
//           font-size: 15px;
//           color: #ccc;
//       }
//   }

//   .div_ul1{
//       width: 100%;
//       height: 100px;
//       clear: both;
//       img{
//               float: left;
//               margin-right: 10px;
//       }
//   }
// }

// //分享页
// .ant-modal-content {
//   width: 403px;
//   height: 530px;
//   background: red;
//   position: relative;
//   .ant-modal-footer {
//     position: absolute;
//     bottom: 10px;
//     right: 15px;
//   }
//   .Sharebox {
//     width: 100%;
//     height: 420px;
//     border-bottom: 2px solid #e7eaee;
//     border-top: 2px solid #e7eaee;
//     img {
//       margin-top: 10px;
//       width: 100%;
//       height: 265px;
//     }
//   }
// }
// .ant-modal-content{
//   height: 200px;
// }

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
html,
body,
#root {
  width: 100%;
  height: 100%;
}
.class_pc {
  .swiper{
    width: 100%;
    height: 300px;
    h3{
      width: 100%;
      height: 100%;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  width: 100%;
  height: 100%;
  .indexbox {
    width: 100%;
    .tops {
      display: none;
    }
    .top {
      width: 100%;
      height: 80px;
      .topbox {
        width: 1330px;
        height: 80px;
        a {
          text-decoration: none;
        }
        margin: auto;
        display: flex;
        line-height: 80px;
        .topleft {
          flex: 1;
          span {
            padding: 0 50px;
          }
        }
        .topright {
          flex: 1;
          span {
            float: right;
            padding: 0 40px;
          }
        }
      }
    }
    .main {
      width: 100%;
      background: #e7eaee;
      .mainbox {
        width: 1430px;
        height: 100%;
        margin: auto;
      }
      .bottom {
        width: 100%;
        height: 100px;
        padding: 40px 0;
        margin-top: 20px;
        background: #292525;
        .bottomicon {
          width: 100px;
          margin: auto;
        }
      }
    }
  }
  //点击划过样式
  .active {
    color: #ff0064 !important;
  }
  .topleft span a:hover {
    color: #ff0064;
  }

  // articles页面
  .articlesbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    .mainleft {
      width: 65%;
      margin-top: 20px;
      .swiper {
        width: 100%;
        height: 415px;
        background: white;
        div {
          width: 100%;
          height: 100%;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .mainTab {
        width: 100%;
        background: white;
        margin-top: 15px;
      }
    }
    .mainright {
      width: 30%;
      height: 665px;
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      h1 {
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
      }
      .mainrighttop {
        width: 100%;
        height: 325px;
        background: white;
        z-index: 1;
        p:hover {
          color: #ff0064;
          cursor: pointer;
        }
      }
      .mainrightbom {
        width: 100%;
        height: 315px;
        background: white;
        span {
          width: 90px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          // padding: 50px;
          display: inline-block;
          border: 1px solid #eee;
          margin-left: 20px;
          margin-top: 17px;
          color: #9c9c9c;
        }
        span:hover {
          color: #ff0064;
          border: 1px solid #ff0064;
          cursor: pointer;
        }
      }
    }
  }
  .detailbox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    .DetailLeft {
      width: 60%;
      background: white;
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
      flex-direction: column;

      .img {
        width: 800px;
        height: 500px;
        margin-top: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .MakDownbox {
        width: 800px;
        img {
          width: 100%;
        }
      }
    }
    .DetailRight {
      width: 30%;
      height: 800px;
      .Top {
        width: 100%;
        height: 325px;
        line-height: 355px;
        background: white;
        // overflow: hidden;
        overflow-y: auto;
        h3 {
          width: 100%;
          height: 60px;
          line-height: 60px;
          border-bottom: 2px solid #eee;
        }
        p {
          width: 100%;
          height: 40px;
          line-height: 40px;
        }
        p:hover {
          color: #ff0064;
        }
      }
      .Bom {
        width: 100%;
        height: 490px;
        overflow-y: auto;
        margin-top: 20px;
      }
    }
  }
  .demo-tabbar {
    display: none;
  }
  .like {
    display: block;
  }
}
.class_h5 {
  .swiper{
    width: 100%;
    height: 220px;
    h3{
      width: 100%;
      height: 100%;
      img{
        width: 100%;
        height: 220px;
      }
    }
  }

  .like {
    display: none;
  }
  .demo-tabbar {
    display: block;
  }
  .indexbox {
    width: 100%;
    .tops {
      display: block;
    }
    .top {
      width: 100%;
      height: 80px;
      display: none;
      .topbox {
        width: 100%;
        height: 80px;
      }
    }
  }

  .main {
    width: 100%;
    background: #e7eaee;
    .mainbox {
      width: 100%;
      margin: auto;
    }
    .bottom {
      width: 100%;
      height: 100px;
      padding: 40px 0;
      margin-top: 20px;
      background: #292525;
      .bottomicon {
        width: 100px;
        margin: auto;
      }
    }
  }
  .detailbox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    .DetailLeft {
      width: 100%;
      background: white;

      flex-wrap: wrap;
      align-content: space-around;
      flex-direction: column;
      .MakDownbox {
        width: 100%;
      }
      .img {
        width: 100%;
        height: 500px;
        margin-top: 20px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .MakDownbox {
        width: 800px;
        img {
          width: 100%;
        }
      }
    }
    .DetailRight {
      width: 30%;
      display: none;
      height: 800px;
      .Top {
        width: 100%;
        height: 325px;
        line-height: 355px;
        background: white;
        // overflow: hidden;
        overflow-y: auto;
        h3 {
          width: 100%;
          height: 60px;
          line-height: 60px;
          border-bottom: 2px solid #eee;
        }
        p {
          width: 100%;
          height: 40px;
          line-height: 40px;
        }
        p:hover {
          color: #ff0064;
        }
      }
      .Bom {
        width: 100%;
        height: 490px;
        overflow-y: auto;
        margin-top: 20px;
      }
    }
  }
}
//点击划过样式
.active {
  color: #ff0064 !important;
}
.topleft span a:hover {
  color: #ff0064;
}
//Home右侧tab详情
.HomeRightTabDetailDetail {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  .HomeRightTabDetailDetailLeft {
    width: 60%;
    .top {
      width: 100%;
      height: 115px;
      background: white;
      display: flex;
      flex-direction: column;
      align-content: center;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-items: center;
      span {
        font-size: 25px;
        font-weight: 600;
        color: #ff0064;
      }
    }
    .main {
      width: 100%;
      height: 190px;
      margin-top: 20px;
      background: white;
      h3 {
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
      }
      span {
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        display: inline-block;
        border: 1px solid #eee;
        margin-left: 10px;
        margin-top: 17px;
        color: #9c9c9c;
      }
      span:hover {
        color: #ff0064;
        border: 1px solid #ff0064;
        cursor: pointer;
      }
    }
    .footer {
      width: 100%;
      height: 1000px;
      background: white;
      margin-top: 20px;
    }
  }
  .HomeRightTabDetailDetailRight {
    width: 30%;
    height: 800px;
    .righttop {
      width: 100%;
      height: 325px;
      line-height: 355px;
      background: white;
      overflow: hidden;
      h3 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
      }
      p {
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
      }
      p:hover {
        color: #ff0064;
        cursor: pointer;
      }
    }
    .rightbom {
      width: 100%;
      background: white;
      margin-top: 20px;
      h3 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #ccc;
      }
      li {
        width: 100%;
        height: 45px;
        line-height: 45px;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
      }
      li:hover {
        color: #ff0064;
        cursor: pointer;
      }
    }
  }
}

//Tab切换
.tab {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background-color: tan;
}
.tab_down {
  height: 240px;
}
.tab_down li {
  height: 240px;
  background-color: greenyellow;
  display: none;
}
.tab_down li.show {
  display: block;
}
.tab_top {
  height: 60px;
}
.tab_top li {
  height: 60px;
  width: 30%;
  background-color: gray;
  float: left;
  margin-right: 10px;
}
.tab_top li.show {
  background-color: greenyellow;
}
//文章详情
.detailbox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  .DetailLeft {
    width: 60%;
    background: white;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    flex-direction: column;
    .img {
      width: 800px;
      height: 500px;
      margin-top: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .MakDownbox {
      width: 800px;
      img {
        width: 100%;
      }
    }
  }
  .DetailRight {
    width: 30%;
    height: 800px;
    .Top {
      width: 100%;
      height: 325px;
      line-height: 355px;
      background: white;
      // overflow: hidden;
      overflow-y: auto;
      h3 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 2px solid #eee;
      }
      p {
        width: 100%;
        height: 40px;
        line-height: 40px;
      }
      p:hover {
        color: #ff0064;
      }
    }
    .Bom {
      width: 100%;
      height: 490px;
      overflow-y: auto;
      margin-top: 20px;
    }
  }
}

.read {
  // position: relative;
  width: 100%;
  height: 100%;
  p {
    line-height: 30px;
    width: 100%;
  }
}
.read_son {
  position: absolute;
  top: 50%;

  left: 50%;
}
.deta_left {
  width: 70%;
  height: 100%;
  img {
    width: 100%;
    height: 500px;
  }
}
.DELYS {
  p {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    text-align: center;
    line-height: 40px;
    background-color: #fff;
    margin-top: 10px;
  }
}

// .Markright {
//   width: 20%;
//   position: fixed;
//   right: 350px;
//   .marktop {
//     background: white;
//   }
//   .marklou {
//     height: 450px;
//     overflow: auto;
//   }
// }
.top-jumper {
  position: fixed;
  right: 0;
  bottom: 15%;
  width: 42px;
  height: 42px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  &:before {
    content: "▲";
    display: block;
    text-align: center;
    color: #aaa;
    line-height: 42px;
  }
  &:hover:before {
    content: "回顶部";
  }
}
.read {
  position: relative;
  width: 100%;
  height: 284px;
  div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
  }
}
.read_son {
  position: absolute;
  top: 50%;

  left: 50%;
}
.demo-tabs {
  .rv-tab__pane {
    padding: 24px 20px;
    background-color: #fff;
  }

  .rv-tabs--card .rv-tab__pane {
    background-color: transparent;
  }
}

.add_nei {
  width: 100%;
  height: 500px;
  ul {
    h3 {
      margin-bottom: 20px;
      margin-top: 10px;
    }

    img {
      width: 200px;
      height: 100px;
    }

    .span1 {
      font-size: 15px;
      color: #ccc;
    }
  }

  .div_ul1 {
    width: 100%;
    height: 100px;
    clear: both;
    img {
      float: left;
      margin-right: 10px;
    }
  }
}

//分享页
.ant-modal-content {
  width: 403px;
  height: 530px;
  background: red;
  position: relative;
  .ant-modal-footer {
    position: absolute;
    bottom: 10px;
    right: 15px;
  }
  .Sharebox {
    width: 100%;
    height: 420px;
    border-bottom: 2px solid #e7eaee;
    border-top: 2px solid #e7eaee;
    img {
      margin-top: 10px;
      width: 100%;
      height: 265px;
    }
  }
}
.ant-modal-content {
  height: 200px;
}

.archivesbox {
  width: 100%;
  height: 100%;
  display: flex;

  .archivesleft {
    width: 65%;
    height: 100%;
    // background-color: var(--background);
    background: white;
    color: var(--color);
    margin-top: 20px;
    .archivestop {
      width: 100%;
      height: 100px;
      background: white;
      border-bottom: 1px solid #000;
      // background-color: var(--background);
      color: var(--color);
      .plum {
        color: #ff0064;
        font-size: 30px;
        margin-left: 350px;
        padding-top: 10px;
      }
      .num {
        margin-left: 350px;
        margin-top: 10px;
        .numm {
          color: #ff0064;
        }
      }
    }
    .archivescont {
      width: 100%;
      height: calc(100% - 100px);
      background: white;
      // background-color: var(--background);
      color: var(--color);
      ul > li {
        margin-top: 20px;
        margin-left: 50px;
        span {
          padding-right: 10px;
        }
      }
      ul > li:hover {
        color: red;
      }
      li:before {
        content: "";
        width: 6px;
        height: 6px;
        display: inline-block;
        border-radius: 50%;
        background: black;
        vertical-align: middle;
        margin-right: 14px;
      }
    }
  }
  .archivesright {
    float: right;
    width: 30%;
    margin-left: 80px;
    background-color: var(--background);
    color: var(--color);
    .archivesrighttop {
      width: 100%;
      // height: 400px;
      background: white;
      // border: solid 1px #ccc;
      background-color: var(--background);
      color: var(--color);
    }
  }
}

.mainright {
  width: 400px;
  height: 665px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  h1 {
    height: 60px;
    line-height: 60px;
    border-bottom: 1px solid #ccc;
  }
  .mainrighttop {
    width: 100%;
    height: 325px;
    background: white;
    z-index: 1;
    p:hover {
      color: #ff0064;
      cursor: pointer;
    }
  }
  .mainrightbom {
    width: 100%;
    height: 315px;
    background: white;
    span {
      width: 90px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      // padding: 50px;
      display: inline-block;
      border: 1px solid #eee;
      margin-left: 20px;
      margin-top: 17px;
      color: #9c9c9c;
    }
    span:hover {
      color: #ff0064;
      border: 1px solid #ff0064;
      cursor: pointer;
    }
  }
}

.KnowledgeBooksbox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .leftbox {
    width: 65%;
    margin-top: 20px;
    .no{
      width: 100%;
      background: white;
    }
  }
  .rightbox {
    width: 30%;
    h3{
      width: 100%;
      height: 60px;
      line-height: 60px;
      border-bottom: 1px solid #ccc;
    }
    li{
      width: 100%;
      height: 45px;
      line-height: 45px;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
    }
    li:hover{
      color: #ff0064;
      cursor: pointer;
    }
  }
}

.class_pc {
  width: 100%;
  height: 100%;
  background-color: var(--background);
  color: var(--color);
  .indexbox {
    width: 100%;
    .tops {
      display: none;
      color: var(--color);
    }
    .top {
      width: 100%;
      height: 80px;
      background-color: var(--headerColor);
      border-bottom: 2px solid #ccc;
      .topbox {
        width: 1330px;
        height: 80px;
        border-bottom: 2px solid #ccc;

        a {
          text-decoration: none;
          color: var(--color);
        }
        margin: auto;
        display: flex;
        line-height: 80px;
        .topleft {
          flex: 1;
          span {
            padding: 0 50px;
          }
        }
        .topright {
          flex: 1;
          span {
            float: right;
            padding: 5px 40px;
          }
          .icon {
            fill: var(--color);
          }
          //太阳动画
          .theme:hover {
            animation: 4s iconsAnimation ease;
          }

          > span:hover svg {
            fill: red;
          }
        }
      }
    }
    // .main {
    //   width: 100%;
    //   .mainbox {
    //     width: 1430px;
    //     margin: auto;
    //     .rv-tab__pane {
    //       border: solid 1px black;
    //       background-color: var(--background);
    //       li {
    //         border-bottom: 1px solid white;
    //       }
    //     }
    //     span {
    //       color: var(--fontColor);
    //     }
    //     h3 {
    //       color: var(--fontColor);
    //     }
    //   }
    //   .bottom {
    //     width: 100%;
    //     height: 100px;
    //     padding: 40px 0;
    //     margin-top: 20px;
    //     background: #292525;
    //     .bottomicon {
    //       width: 100px;
    //       margin: auto;
    //     }
    //   }
    // }
  }
  //点击划过样式
  .active {
    color: #ff0064 !important;
  }
  .topleft span a:hover {
    color: #ff0064;
  }

  // articles页面
  .articlesbox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    background-color: var(--background);
    .mainleft {
      width: 1010px;
      margin-top: 20px;
      background-color: var(--background);
      color: var(--color);
      .swiper {
        width: 100%;
        height: 415px;
        background: white;
      }
      .mainTab {
        width: 100%;
        background: white;
        margin-top: 15px;
        background-color: var(--background);
        color: var(--color);
      }
    }
    .mainright {
      width: 400px;
      height: 665px;
      margin-top: 20px;
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      .mainrighttop {
        width: 99%;
        height: 325px;
        border: solid 2px #ccc;
        background-color: var(--background);
        color: var(--color);
        background: white;
      }
      .mainrightbom {
        width: 100%;
        height: 400px;
        background: white !important;
        background-color: var(--background);
        color: var(--color);
        border: solid 2px #ccc;
      }
    }
  }
}

// .main {
//   width: 100%;

//   background-color: var(--background);
//   .mainbox {
//     width: 100%;
//     margin: auto;
//     background-color: var(--background);
//   }
//   .bottom {
//     width: 100%;
//     height: 100px;
//     padding: 40px 0;
//     margin-top: 20px;
//     background: #292525;
//     .bottomicon {
//       width: 100px;
//       margin: auto;
//     }
//   }
// }

.detailbox {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  padding: 20px 0;
  background-color: var(--background);
  .DetailLeft {
    width: 60%;
    background: white;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    flex-direction: column;
    background-color: var(--background);
    .img {
      width: 800px;
      height: 500px;
      margin-top: 20px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .MakDownbox {
      width: 800px;
      background-color: var(--background);
      color: var(--color);
      img {
        width: 100%;
      }
    }
  }
  .DetailRight {
    width: 30%;
    height: 800px;
    background-color: var(--background);
    color: var(--color);
    .Top {
      width: 100%;
      height: 325px;
      line-height: 355px;
      background: white;
      background-color: var(--background);
      color: var(--color);
      // overflow: hidden;
      overflow-y: auto;
      h3 {
        width: 100%;
        height: 60px;
        line-height: 60px;
        border-bottom: 2px solid #eee;
      }
      p {
        width: 100%;
        height: 40px;
        line-height: 40px;
      }
      p:hover {
        color: #ff0064;
      }
    }
    .Bom {
      width: 100%;
      height: 390px;
      overflow-y: auto;
      margin-top: 20px;
      .className {
        background: red;
      }
    }
  }
}

.class_pc .articlesbox .mainright .mainrightbom{
  margin-top: 10px;
}


.ant-modal-content{
  height: 550px;
}